<!DOCTYPE HTML>
<iframe id="frame" srcdoc="<style>input { width: 100px; }</style><input id='input' value='add stuff here'></input>"></iframe>
<script>
if (window.testRunner)
    testRunner.dumpAsText();
if (window.internals)
    internals.settings.setPreferCompositingToLCDTextEnabled(true);

onload = function() {
    var layerTreePreStyleUpdate = "";
    var layerTreePostStyleUpdate = "";
      
    document.getElementById("frame").contentDocument.getElementById("input").value =
        "This is a very long string that will cause overflow";
    layerTreePreStyleUpdate = internals.layerTreeAsText(document);

    // Force a style recalc.
    document.body.offsetTop;
    layerTreePostStyleUpdate = internals.layerTreeAsText(document);

    var pre = document.createElement('pre');
    if (layerTreePreStyleUpdate === layerTreePostStyleUpdate)
        pre.innerHTML = "PASS - layer trees are the same.";
    else
        pre.innerHTML = "FAIL - layer trees are not the same.";
    document.body.appendChild(pre);
};
</script>
